import classNames from 'classnames'
import './index.scss'
import { useSelector,useDispatch } from 'react-redux'
import { setMenuIndex } from '../../store/modules/takeaway'
const Menu = () => {
  // const foodsList = [
  //   {
  //     "tag": "318569657",
  //     "name": "一人套餐",
  //     "foods": [
  //       {
  //         "id": 8078956697,
  //         "name": "烤羊肉串(10串)",
  //         "like_ratio_desc": "好评度100%",
  //         "month_saled": 40,
  //         "unit": "10串",
  //         "food_tag_list": ["点评网友推荐"],
  //         "price": 90,
  //         "picture": "https://zqran.gitee.io/images/waimai/8078956697.jpg",
  //         "description": "",
  //         "tag": "318569657"
  //       }
  //     ]
  //   }
  // ]

  const { foodsList,menuIndex } = useSelector(state=>state.foods)

  const menus = foodsList.map(item => ({ tag: item.tag, name: item.name }))
  const dispatch =  useDispatch();


  /**
   * 设置当前菜单索引高亮
   * @param {Number} index 
   */
  function changeMenu(index){

    dispatch(setMenuIndex(index));
  }

  return (
    <nav className="list-menu">
      {/* 添加active类名会变成激活状态 */}
      {menus.map((item, index) => {
        return (
          <div
            onClick={()=>changeMenu(index)}
            key={item.tag}
            className={classNames(
              'list-menu-item',
              menuIndex === index && 'active'
            )}
          >
            {item.name}
          </div>
        )
      })}
    </nav>
  )
}

export default Menu
